<div id="header" class="header-mout">HTML5 text extension demo.</div>

<div class="tips">
<pre class="tips-tag">
Key Binding
indentRight         :[TAB]
indentLeft          :[shift+TAB]

deleteLineFromCaret :[ctrl+D]
copyLineFromCaret   :[ctrl+shift+D]

smart indent        :[ENTER]

Undo                :[ctrl+Z]
Redo                :[ctrl+Y]
</pre>
</div>

<div class="config-pane">
    <button id="clear" class="config-button">clear data</button>
    <button id="toggle_animate" class="config-button">animate text</button>
    <input type="text" id="search" value="DirectoryReader "/>
    <label for="ta_ss">selectionStart:</label>
    <input type="text" id="ta_ss" class="input-text" value="0">
    <label for="ta_se">selectionEnd:</label>
    <input type="text" id="ta_se" class="input-text" value="0">
</div>

<textarea id="text" wrap="off"></textarea>

<span id="ur_type" class="span-tag">N/A</span>
<span class="span-tag before-start">before selectionStart</span>
<span class="span-tag text-selection">selection</span>
<!--  contenteditable="true" -->
<span class="span-tag after-end">after selectionEnd</span>
<input type="text" id="pick_length" value="5" title="pick up before/after text length."/>

<pre id="log">
</pre>

<span class="span-tag">Add to HTML</span>
<!--
https://cdn.rawgit.com/motrohi/js-projects/master/jsafx/
-->
<pre class="prettyprint lang-html">
	&lt;script src="html5-text-extension.js">&lt;/script>
	&lt;!-- or -->
	&lt;script src="https://js-extension-afx.googlecode.com/svn/trunk/html5-text-extension.js">&lt;/script>
</pre>

<span class="span-tag">Then, it will be available in this way.</span>
<pre class="prettyprint lang-js">
    // observe undo, redo event.
    HTML5TextEx.getURMProvider().addListener(handleUndoRedoEvent);
    // debug for development.
    HTML5TextEx.setDebug(true);
    // install smart edit extension.
    document.getElementById("textarea.id").installSmart("    "); // "\t", "  " etc.
    // uninstall smart edit extension.
    document.getElementById("textarea.id").unInstallSmart();
</pre>
